<template>
	<s-layout class="set-wrap" title="语言设置" :bgStyle="{ color: '#f6f6f6' }">
		<view class="languages">
			<view 
				class="languages-item" 
				:class="{'languages-item-active': locale === item.id}" 
				v-for="item in languages" 
				:key="item.id"
				@click="changeLang(item)">
				<view class="languages-left">
					<view class="languages-icon">
						<image class="languages-img" :src="sheep.$url.cdn(item.icon)" mode="aspectFill"></image>
					</view>
					<view class="languages-name">{{item.name}}</view>
				</view>
				
				<uni-icons v-if="locale === item.id" :size="16" color="#fff" type="checkmarkempty" />
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import { computed } from 'vue';
	import { useI18n } from 'vue-i18n'
	import {languages} from '@/sheep/i18n-lang'
	import sheep from '@/sheep';
	
	const { locale, t }  = useI18n()
	function changeLang(lang) {
		locale.value = lang.id
		uni.setStorageSync('lang', lang.id)
		uni.setLocale(lang.id)
		sheep.$store('app').init();
		sheep.$helper.toast(t('pages.changeLang.modalTitle'));
		setTimeout(() => {
			uni.showLoading()
			setTimeout(() => {
				uni.hideLoading()
				sheep.$router.go('/pages/index/user');
			}, 500)
		}, 500)
		
		
		// uni.reLaunch({
		// 	url: '/pages/index/index'
		// });
		// uni.showModal({
		//   title: t('pages.changeLang.modalTitle'),
		//   content: t('pages.changeLang.modalContent'),
		//   success: (res) => {
		//     if (res.confirm) {
		// 		locale.value = lang.id
		// 		uni.setStorageSync('lang', lang.id)
		// 		uni.setLocale(lang.id)
		// 		sheep.$store('app').init();
		// 		uni.reLaunch({
		// 			url: '/pages/index/index'
		// 		});
		//     }
		//   },
		// });
	}
</script>

<style scoped lang="scss">
	.languages {
		padding: 200rpx;
	}
	.languages-item {
		width: 100%;
		padding: 30rpx 20rpx;
		background-color: #fcb9b3;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.languages-left {
			display: flex;
			align-items: center;
		}
		
		.languages-icon {
			width: 90rpx;
			height: 60rpx;
			margin-right: 20rpx;
			box-shadow: 0 0 0.8em #e9b461;
			
			.languages-img {
				width: 100%;
				height: 100%;
			}
		}
		.languages-name {
			color: #fff;
		}
	}
	
	.languages-item-active {
		background-color: $red;
	}
</style>